{% extends 'music_base.html' %}
{% load static %}

{% block title %}
音乐信息
{% endblock %}

{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;

        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }

    .my_button {
            {
            #background-color: red;
            /* Green */
            #
        }

        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }

    .my_button1 {
        background-color: white;
        color: black;
        border: 2px solid red;
        font-size: 15px;
    }

    .my_button1:hover {
        background-color: red;
        color: white;
    }

    .my_button2 {
        background-color: white;
        color: black;
        border: 2px solid deepskyblue;
        font-size: 15px;
    }

    .my_button2:hover {
        background-color: deepskyblue;
        color: white;
    }
</style>
{% endblock %}

{% block body %}

<h1>音乐信息</h1>
<div>
    <div>音乐信息</div>
    <table>
        <thead>
            <tr>
                <th class="text-center">名称</th>
                <th class="text-center">浏览量</th>
                <th class="text-center">图片</th>
                <th class="text-center">播放</th>
                <th class="text-center">查看详情</th>
            </tr>
        </thead>
        <tbody>
            {% for music in musics %}
            <tr>
                <td>{{ music.name }}</td>
                <td>{{ music.view_number }}</td>
                <td>
                    <img src="{{ music.cover_image.url}}" alt="" style="width: 120px;height: 90px">
                </td>
                <td>
                    <audio controls>
                        <source src="{{ music.music_file.url }}" type="audio/mpeg">
                        您的浏览器不支持音频元素。
                    </audio>
                </td>
                <td>
                    <a href="/music/detail/{{ music.id }}">
                        <button class="my_button2">查看详情</button>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}